<template>
  <a-spin :spinning="loading">
    <a-card>
      <a-tabs @change="getChangeTab" style="background: #fff; padding: 0px 16px 8px 16px;" :animated="false"
              v-model="tabs">
        <a-tab-pane key="common_doctor_dept" tab="科室"></a-tab-pane>
        <a-tab-pane key="common_doctor_title" tab="职称"></a-tab-pane>
        <a-tab-pane key="common_doctor_subject" tab="专业"></a-tab-pane>
        <a-tab-pane key="doctor_title" tab="医生头衔"></a-tab-pane>
        <a-tab-pane key="hot_keyword" tab="热门关键词"></a-tab-pane>
        <a-tab-pane key="system_issues_category" tab="常见问题类型"></a-tab-pane>
        <a-tab-pane key="system_option_type" tab="反馈类型"></a-tab-pane>
        <a-tab-pane key="service_description" tab="服务说明"></a-tab-pane>
         <a-tab-pane key="consultation_time" tab="咨询时长"></a-tab-pane>
      </a-tabs>
      <a-row :gutter="16">



        <a-col :span="8">

          <a-button v-if="type!='service_description'" @click="goCharts({dictType:type})" class="mx-8" type="primary">新增</a-button>
<!--          <a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>-->
        </a-col>
      </a-row>
      <a-table style="display: none" bordered id="tableExport" class="mt-16 order-table" :columns="columns"
               :data-source="data" :scroll="scroll" :pagination="pagination">
        <template #status="status, data">
          {{ data.status == 1 ? '已上架' : '下架' }}
        </template>
        <template #createTime="createTime, data">
          {{ $utils.formatTimestamp(data.createTime)}}
        </template>
        <template #picUrl="picUrl, data">
          <PreviewImage :value="getPhotos('https://pages.c-ctrip.com/carisd/app/111824.png')" />
        </template>

      </a-table>
      <a-table class="mt-16 order-table" :columns="type!='service_description'?columns:columns1" :data-source="data" :scroll="scroll"
               :pagination="pagination">

        <template #createTime="createTime, data">
          {{ $utils.formatTimestamp(data.createTime) }}
        </template>
        <template #picUrl="picUrl, data">
          <PreviewImage v-if="data.picUrl" :value="getPhotos(data.picUrl)" />
        </template>

        <template #action="action, data">
          <div style="display: flex;justify-content: center;">
            <a-button @click="getEdit(data, '编辑')" class="mr-10" type="primary">
              编辑
            </a-button>
            <!-- <a-button @click="goCharts(data)" style="background: 	#32CD32;" type="primary">
              查看
            </a-button> -->
            <a-button v-if="type!='service_description'" @click="delect(data)" class=" mr-10" type="danger">
              删除
            </a-button>

            <!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
          </div>
        </template>

      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <particulars ref="particulars"></particulars>
    <create @upload="upload" ref="create"></create>
    <Edit ref="edit" @success="search" />
  </a-spin>
</template>
<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import create from './components/create.vue'
import Edit from './components/edit'
import particulars from './components/particulars'
import {
  dictDataList,
  dictDataDelete,
} from '@/api/newPet'
import {
  tableMixins
} from '@/utils/mixins'
export default {
  mixins: [tableMixins],
  components: {
    particulars,
    create,
    Edit
  },
  data() {
    return {
      loading: false,
      type: 'common_doctor_dept',
      tabs: 'common_doctor_dept',
      name: '', //分类名称
      data: [{
        id: 1111,
        travellerName: '',
        status: 1
      }],
      columns: [{
        title: '序号',
        dataIndex: 'id',
        align: 'center',
        scopedSlots: {
          customRender: 'id'
        }
      },
        {
          title: '类目名称',
          dataIndex: 'label',

          align: 'center',
          scopedSlots: {
            customRender: 'label'
          },
        },

        {
          title: '发布时间',
          dataIndex: 'createTime',

          align: 'center',
          scopedSlots: {
            customRender: 'createTime'
          },
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      columns1: [{
        title: '序号',
        dataIndex: 'id',
        align: 'center',
        scopedSlots: {
          customRender: 'id'
        }
      },
        {
          title: '类目名称',
          dataIndex: 'label',

          align: 'center',
          scopedSlots: {
            customRender: 'label'
          },
        },
        {
          title: '说明',
          dataIndex: 'remark',

          align: 'center',
          scopedSlots: {
            customRender: 'remark'
          },
        },

        {
          title: '发布时间',
          dataIndex: 'createTime',

          align: 'center',
          scopedSlots: {
            customRender: 'createTime'
          },
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],

    }
  },
  computed: {

  },
  watch: {

  },
  async created() {

  },
  mounted() {
    this.search()
  },
  methods: {
    getChangeTab(e) {
      this.type = e
      this.search()
    },
    getPhotos(img) {

      return img.split(",")
    },

    search() {
      this.pageNum = 1
      this.getData()
    },
    upload() {
      this.search()
    },
    delect(data) {
      this.$confirm({
        title: '删除',
        content: `请确认是否删除该条信息`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {

          this.loading = true
          dictDataDelete({
            id: data.id
          })
            .then((res) => {
              this.$message.success('删除成功！')

              this.search()

              this.loading = false
            })
            .finally(() => (this.loading = false))

        },
      })
    },
    goCharts(data) {
      this.$refs.create.open(data)
    },
    getEdit(data, name) {
      if(data.dictType=="service_description"){
        this.$refs.edit.open(JSON.parse(JSON.stringify(data)))
      }else{
        let info=JSON.parse(JSON.stringify(data))
       this.$refs.create.open(info)
      }
    },
    getSearchParams() {
      return {
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        type: this.type
      }
    },
    getData() {
      this.loading = true
      dictDataList(this.getSearchParams()).then(data => {
        this.data = data
      }).finally(() => this.loading = false)
    },
    reset() {
      this.search()
      this.name = ''
    }
  }
}
</script>
<style lang="less" scoped>
.ant-col {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .label {
    flex-shrink: 0;
    width: 86px;
    text-align: right;
    font-size: 14px;
    color: #595959;
  }

  .w-full {
    flex: 1;
  }
}
</style>